<template>
  <Dialog v-model:open="openDialog">
    <DialogTrigger as="div">
      <!-- 输出路径设置 -->
      <div class="p-2 rounded-md bg-stone-100 flex cursor-pointer items-center">
        <i class="i-mynaui-folder text-gray-500 mr-2"></i>
        <span v-if="settingsStore.outSavePath" class="text-gray-900 truncate">{{
          settingsStore.outSavePath
        }}</span>
        <span v-else class="text-gray-500">未设置，点击选择保存位置</span>
      </div>
    </DialogTrigger>
    <DialogContent>
      <DialogHeader>
        <DialogTitle>设置保存路径</DialogTitle>
      </DialogHeader>
      <div class="save-path-dialog">
        <div class="flex items-center">
          <Input
            type="text"
            class="flex-1 ring-0"
            placeholder="选择保存路径"
            v-model="localPath"
            readonly
          />
          <button
            class="text-white ml-2 px-2 py-1 rounded-md bg-indigo-500 flex items-center"
            @click="browsePath"
            :disabled="isSelectingPath"
          >
            <i v-if="isSelectingPath" class="i-mynaui-circle-dashed-solid mr-2 animate-spin"></i>
            <i v-else class="i-mynaui-folder mr-2"></i>
            {{ isSelectingPath ? '选择中...' : '浏览' }}
          </button>
        </div>
      </div>

      <DialogFooter>
        <DialogClose as-child>
          <Button variant="secondary" @click="cancelPath">取消</Button>
        </DialogClose>
        <Button variant="default" @click="confirmPath" :disabled="!localPath"> 确认 </Button>
      </DialogFooter>
    </DialogContent>
  </Dialog>
</template>

<script setup lang="ts">
  import { ref, watch } from 'vue'
  import {
    Dialog,
    DialogContent,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
    DialogFooter
  } from '@renderer/components/ui/dialog'
  import { Input } from '@renderer/components/ui/input'
  import { Button } from '@renderer/components/ui/button'
  import { useSelectFilePath } from '@renderer/hooks/useSelectPath'
  import { useSettingsStore } from '@renderer/store/modules/settings.store'
  const props = defineProps({
    modelValue: {
      type: Boolean,
      default: false
    },
    savedPath: {
      type: String,
      default: ''
    }
  })

  const openDialog = ref(false)

  const settingsStore = useSettingsStore()

  const emit = defineEmits(['path-selected'])

  const localPath = ref(props.savedPath || '')

  // 使用文件路径选择hook
  const { isSelectingPath, selectPath } = useSelectFilePath({
    defaultPath: props.savedPath,
    onPathSelected: (path) => {
      localPath.value = path
    },
    onError: (error) => {
      console.error('文件路径选择错误:', error.message)
    }
  })

  // 监听外部path变化
  watch(
    () => props.savedPath,
    (val) => {
      localPath.value = val || ''
    }
  )

  // 浏览文件夹
  const browsePath = async () => {
    try {
      const selectedPath = await selectPath()
      if (selectedPath) {
        localPath.value = selectedPath
      }
    } catch (error) {
      console.error('选择路径失败:', error)
    }
  }

  // 取消选择
  const cancelPath = () => {}

  // 确认选择
  const confirmPath = () => {
    if (localPath.value) {
      emit('path-selected', localPath.value)
    }
    openDialog.value = false
  }
</script>
